<template>
    <div>
        <el-row>
            <el-form :inline="true" ref="form" :model="form" label-width="66px" class="demo-form-inline" clo>

                <el-form-item label="" prop="type">
                    <el-select size="mini" v-model="form.is_folder" placeholder="筛选课件展示形式" filterable clearable>
                        <el-option v-for="item in file_types" :key="item.is_folder" :label="item.name"
                            :value="item.is_folder">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" prop="book_type">
                    <el-select size="mini" v-model="form.book_type" placeholder="筛选课件分类" filterable clearable>
                        <el-option v-for="item in book_types" :key="item.book_type" :label="item.book_name"
                            :value="item.book_type">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="title">
                    <el-input size="mini" placeholder="输入教材/课件名称" v-model="form.title" clearable></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="search" size="mini">筛选</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-row class="pt20">
                <div v-show="showControlButton1">
                    <pers-button icon="" size="mini" @click="createFolder()" type="primary" style="width: 120px;"
                        label="创建文件夹" perms="kanke:textbook:courseware:add-folder"></pers-button>
                    <pers-button icon="" size="mini" @click="showMoveFiles()" type="primary" style="width: 120px;"
                        label="移动" perms="kanke:textbook:courseware:move"></pers-button>
                </div>
                <div v-show="showControlButton2">
                    <el-button icon="" size="mini" @click="selectFiles()" type="" style="width: 120px;"
                        label="确定">确定</el-button>
                    <el-button icon="" size="mini" @click="hideMoveFiles()" type="" style="width: 120px;"
                        label="取消">取消</el-button>
                </div>
            </el-row>
            <el-row class="pt20">
                <div class="content">
                    <div class="content__item" v-for="(item, index) in tableData">

                        <div>
                            <div style="position: relative;display: inline-block;">
                                <img src="@/assets/img/kanke/courseware/folder.png" alt="暂无图片"
                                    style="vertical-align: middle;width: 170px; height: 150px;position: relative;"
                                    v-if="item.is_folder == 1">
                                <img :src="item.cover_url" alt="暂无图片"
                                    style="vertical-align: middle;width: 170px; height: 150px;position: relative;"
                                    v-else>
                                <el-alert v-if="item.is_folder != 1" :title="showType(item.book_type)" type="success"
                                    style="width: 75px;height:22px;top:0;background-color: #00FFFE;text-align: center;color: black;position: absolute;left: 0;"
                                    :closable="false">
                                </el-alert>
                                <label class="checkbox-label" v-if="item.is_folder != 1">
                                    <input type="checkbox" class="checkbox" name="courseware_name" :value="item.id"
                                        style="width: 20px;height: 20px;">
                                </label>
                            </div>
                            <p class="content__item-title" style="width: 169px;height: 63px;overflow: hidden;text-overflow:ellipsis;
                               display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space: break-spaces;">
                                {{ item.title }}
                            </p>
                            <p v-if="item.is_folder != 1">
                                <pers-button type="" size="small" label="录题"
                                    perms="kanke:textbook:courseware:sound"></pers-button>
                                <pers-button type="" size="small" style="color: red;margin-left: 0px;" @click="delFile(item.id, 1)"
                                    label="删除" perms="kanke:textbook:courseware:del"></pers-button>
                            </p>
                            <p v-else>
                                <pers-button type="" size="small" @click="folderDetail(item.id)"
                                    perms="kanke:textbook:courseware:detail" label="详情"></pers-button>
                                <pers-button type="" size="small" style="color: blue;margin-left: 0px;"
                                    @click="editFolder(item.id, item.title)" perms="kanke:textbook:courseware:edit"
                                    label="编辑"></pers-button>
                                <pers-button type="" size="small" style="color: red;margin-left: 0px;" @click="delFile(item.id, 0)"
                                    perms="kanke:textbook:courseware:del" label="删除"></pers-button>
                            </p>
                        </div>

                    </div>
                </div>
            </el-row>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageInfo.pageNumber" :page-sizes="pageSizes" :page-size="pageInfo.pageSize"
                    background layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
                </el-pagination>
            </div>
        </el-row>

        <el-dialog :visible.sync="ShowFormFolderVisible" width="30%" center :before-close="handleClose" append-to-body
            :title="!formFolder.id ? '新增文件夹' : '修改文件夹'">
            <el-row type="flex" justify="center">
                <el-form ref="formFolder" :model="formFolder" label-width="80px">
                    <el-form-item label="*文件夹名称">
                        <el-input type="text" v-model="formFolder.title" placeholder="限24个字"
                            :maxlength="formFolder.maxLength"></el-input>
                    </el-form-item>
                </el-form>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose" size="small">取 消</el-button>
                <el-button type="primary"
                    @click="!formFolder.id ? submitFormFolder('formFolder') : submitFormFolder('formFolder')"
                    size="small">确 定</el-button>
            </div>
        </el-dialog>

        <show-folder-list v-if="ShowFolderVisible" :visible.sync="ShowFolderVisible" :mutiFileIds="multipleSelection"
            @reloadInit="reloadInit"></show-folder-list>
    </div>
</template>
<script>
import { handleResize, pageSizes } from '@/constant/index.js'
import { getList, editFolder, delFile } from "@/api/kanke/textbook/coursewarepub";
import ShowFolderList from "./ShowFolderList";
import { getPageSize } from '@/utils';
import PersButton from '../../../../../components/PersButton.vue';
export default {
    name: "KanKeTextbookCourseWareMateTabPane",
    components: {
        ShowFolderList,
        PersButton
    },
    data() {
        return {
            loading: false,
            ShowFolderVisible: false,
            ShowFormFolderVisible: false,

            showControlButton1: true,
            showControlButton2: false,

            form: {
                folder_level: 1,
                book_type: '',
                is_folder: '',
                title: ''
            },
            formFolder: {
                id: 0,
                maxLength: 24,
                folder_level: 1,
                title: ''
            },
            pageInfo: {
                pageNumber: 1,
                pageSize: 10,
                total: 0
            },
            file_types: [
                { 'is_folder': 1, 'name': '文件夹' },
                { 'is_folder': 0, 'name': '课件' }
            ],
            book_types: [
                { 'book_type': 1, 'book_name': '课本' },
                { 'book_type': 2, 'book_name': '视频' },
                { 'book_type': 3, 'book_name': 'PPT' },
                { 'book_type': 4, 'book_name': '音频' },
            ],
            multipleSelection: [],  //多选复选框
            tableData: [],
            type: 'book',
            pageSizes
        }
    },
    watch: {
        $route(to, from) {
            //window.location.reload();
            this.init();
        }
    },
    mounted() {
        this.pageInfo.pageSize = getPageSize() || 12
        this.init();
    },
    methods: {
        handleResize,
        init() {
            // this.pageInfo.pageSize = getPageSize() || 12

            // let obj = this.handleResize();
            // this.pageSizes = obj.pageSizes
            // if (this.pageInfo.pageSize == 10) {
            //   this.pageInfo.pageSize = obj.pageSize;
            // }

            const params = {
                ...this.form,
                ...this.pageInfo
            };
            this.loading = true;

            getList(params).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.data
                    this.pageInfo.total = res.data.total
                }
                this.loading = false
            })
        },
        search() {
            this.pageInfo.pageNumber = 1;
            this.init();
        },
        delFile(id, is_file) {
            if (is_file == 0) {
                var message = '你确定删除该文件夹?';
            } else {
                var message = '你确定删除该文件?';
            }
            this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                delFile({ "id": id, 'is_file': is_file }).then(res => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init();
                    } else {
                        this.msgError(res.msg);
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

        },
        reloadInit() {
            this.ShowFolderVisible = false;  //子组件弹框关闭
            this.hideMoveFiles();
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach(function (checkbox) {
                if (checkbox.checked) { // 检查是否选中
                    checkbox.checked = false;
                }
            });
            this.init();
        },
        folderDetail(id) {
            const randNum = new Date().getTime();
            this.$router.push({ path: 'folderdetail', query: { id: id, randNum: randNum } });
            //this.$router.push({ path: 'folderdetail', query: { id: id } });
        },
        createFolder() {
            this.formFolder.id = 0;
            this.formFolder.title = '';
            this.ShowFormFolderVisible = true;
        },
        selectFiles() {
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            var values = [];
            checkboxes.forEach(function (checkbox) {
                if (checkbox.checked) { // 检查是否选中
                    values.push(checkbox.value); // 将值添加到数组中
                }
            });
            this.multipleSelection = values;
            console.log('all selected checkbox', this.multipleSelection);
            //显示弹框
            this.ShowFolderVisible = true;
        },
        showMoveFiles() {
            this.showControlButton1 = false;
            this.showControlButton2 = true;

            var labelCheck = document.getElementsByClassName('checkbox-label');
            for (var i = 0; i < labelCheck.length; i++) {
                labelCheck[i].style.display = "block";
            }
        },
        hideMoveFiles() {
            this.showControlButton1 = true;
            this.showControlButton2 = false;
            var labelCheck = document.getElementsByClassName('checkbox-label');
            for (var i = 0; i < labelCheck.length; i++) {
                labelCheck[i].style.display = "none";
            }

            //每次关闭默认设置未选中状态
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach(function (checkbox) {
                if (checkbox.checked) { // 检查是否选中
                    checkbox.checked = false;
                }
            });


        },
        showType(book_type) {
            for (let i = 0; i < this.book_types.length; i++) {
                if (book_type == this.book_types[i].book_type) {
                    return this.book_types[i].book_name;
                }
            }
        },
        //关闭抽屉
        handleClose() {
            this.ShowFormFolderVisible = false;
            this.formFolder.title = '';
            this.formFolder.id = 0;
        },
        editFolder(id, title) {
            this.formFolder.id = id;
            this.formFolder.title = title;
            this.ShowFormFolderVisible = true;
        },
        submitFormFolder() {
            editFolder(this.formFolder).then((res) => {
                // console.log(res)
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.ShowFormFolderVisible = false;
                    this.init();
                } else {
                    this.msgError(res.msg);
                }
            })
        },
        handleSizeChange(val) {
            this.pageInfo.pageSize = val
            this.init()
        },
        handleCurrentChange(val) {
            this.pageInfo.pageNumber = val
            this.init()
        }
    }
}
</script>
<style lang="scss" scoped>
@import "@/styles/abstract/mixins.scss";

.demo-form-inline {
    ::v-deep .el-select .el-input {
        width: 150px;
    }
}

::v-deep .el-alert {
    border-radius: 0;
}

.checkbox-label {
    position: absolute;
    top: -12px;
    right: -10px;
    display: none;
}

::v-deep .el-dialog__header {
    background: #03A7EF;
}

.content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    margin-bottom: 15px;
    min-height: 900px;

    &__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 20px;

        &-title {
            margin-top: 10px;
            @include ellipsis(160px);
        }
    }
}
</style>